<template>
   <div class="skHomePage">
     <div class="skContainer">
      <div class="sectionItem">
        <market />
        <news />
      </div>
      <div class="sectionItem">
        <project />
        <div class="macroDataTable">
            <section class="macroSecton">
              <macro-approval />
            </section>
            <section>
              <assets />
              <order />
            </section>
        </div>
      </div>
     </div>
   </div>
 </template>
 <script>
 import Market from './market.vue';
 import News from './news.vue';
 import Project from './project.vue';
 import MacroApproval from './macroApproval.vue';
 import Order from './order.vue';
 import Assets from './assets.vue';

 export default {
   data () {
     return {

     };
   },
   components: {
     Market,
     News,
     Assets,
     Order,
     MacroApproval,
     Project
   }
 };
 </script>
 <style lang="less" rel="stylesheet/less" scoped>
  .skHomePage{
    padding-bottom: 30px;
    background: #181d29;
    .skContainer{
      background: #000;
      display: flex;
      .sectionItem:nth-child(1){
        margin-right: 10px;
      }
      .sectionItem:nth-child(2){
        .macroDataTable{
          display: flex;
          .macroSecton{
            margin-right: 10px;
          }
        }
      }
    }
  }
 </style>
